<template>
    <view :style="{ '--color': color }">
        <status-bar :title="type == 1 ? '新增地址' : '编辑地址'"></status-bar>

        <!-- <view class="row a-center bgwhite padding20 bor_radius_10 m-top20" @click="chooseAddress" v-if="type == 1">
			<view class="iconfont icon-weixin color_wechat size42"></view>
			<text class="black size26 m-left20">获取微信收货地址</text>
			<view class="iconfont icon-a-zujian7 h6 color_99 j-self-end"></view>
		</view> -->

        <view class="row bgwhite bor_radius_10 p-left20 p-right20 m-top20">
            <view class="list bot">
                <text class="title_name">收货人</text>
                <input type="text" class="flex-1 height color_33 size26" v-model="Aname" placeholder="收货人姓名" placeholder-class="place" />
            </view>
            <view class="list bot">
                <text class="title_name">手机号码</text>
                <input type="number" class="flex-1 height color_33 size26" v-model="Amobile" placeholder="收货人手机号" placeholder-class="place" />
            </view>
            <view class="list bot">
                <text class="title_name">所在地区</text>
                <picker mode="region" :value="region" @change="changeCity" class="flex-1 city">
                    <view class="row a-center cityPick">
                        <input type="text" disabled class="flex-1 height color_33 size26" v-model="Aregion" placeholder="省/市/区" placeholder-class="place" />
                        <view class="iconfont icon-a-zujian7 color_99 size26"></view>
                    </view>
                </picker>
            </view>
            <view class="rows p-top24 p-bot24 bot">
                <view class="listText">
                    <text class="title_name">详细地址</text>
                    <textarea
                        class="flex-1 color_33 size26 textarea"
                        disable-default-padding
                        :maxlength="-1"
                        auto-height
                        v-model.trim="Aaddress"
                        placeholder="请填写详细地址"
                        placeholder-class="place"
                    ></textarea>
                    <view class="d-flex a-center color_99 p-left20 p-bot20 p-top20" @click="chooseLocation" v-if="position.longitude">
                        <view class="iconfont icon-a-zu1418 h6"></view>
                        <text class="h6 m-left4">定位</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="row j-sb a-center bgwhite padding20 bor_radius_10 m-top20">
            <text class="black size26">设为默认收货地址</text>
            <u-switch v-model="checked" :activeColor="color" @change="switchChange"></u-switch>
        </view>

        <view class="rows m-top50">
            <view class="botBtn Save flexac white" @click="SaveAddress">保存并使用</view>
            <view class="botBtn bgwhite flexac color_33 delAdd" @click="delAdress" v-if="type == 2">删除收货地址</view>
        </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';

    export default {
        data() {
            return {
                id: '',
                bid: '',
                recommend: '',
                recommend_Aregion: '',
                Aname: '',
                Amobile: '',
                Aregion: '',
                Aaddress: '',
                doorplate: '',
                type: 2, // 1 新增地址 2 编辑地址
                region: [],
                areaHeights: 40,
                checked: false,
                postionAdd: '',
                province_code: '',
                city_code: '',
                county_code: '',
                town_code: '',
                addressComponent: ''
            };
        },
        async onLoad(option) {
            if (option.type) this.type = option.type;
            this.type == 1 ? this.$BarTitle('新增地址') : this.$BarTitle('编辑地址');
            if (option.bid) this.bid = option.bid;
            if (option.id) {
                this.id = option.id;
                this.obtainAddress(option.id);
            }
            if (this.position.longitude == 0) {
                const result = await this.$pop.getLocation();
            }
            if (this.position.longitude && this.type == 1) this.geocoder(this.position.longitude, this.position.latitude);
        },
        onShow() {
            if (this.userInfo) this.Amobile = this.userInfo.phone;
        },
        methods: {
            ...mapMutations(['getAddress']),
            geocoder(lon, lat) {
                this.$showLoading('');
                this.$http
                    .get_ds({
                        url: '/geocoder',
                        data: {
                            postStr: {
                                lon,
                                lat,
                                ver: 1
                            },
                            type: 'geocode',
                            tk: this.tdkey
                        }
                    })
                    .then((res) => {
                        console.log(res, 'geocoder');
                        this.$hideLoading();
                        if (res.status != 0) return;
                        const result = res.result.addressComponent;
                        this.region[0] = result.province;
                        this.region[1] = result.city ? result.city : result.province;
                        this.region[2] = result.county;
                        this.Aregion = `${this.region[0]}/${this.region[1]}/${this.region[2]}`;
                        this.addressComponent = result;
                    });
            },
            chooseLocation() {
                let that = this;
                uni.chooseLocation({
                    latitude: this.position.latitude,
                    longitude: this.position.longitude,
                    success: async (res) => {
                        console.log(res);

                        that.geocoder(res.longitude, res.latitude);
                        that.disassemble(res);
                    },
                    fail: (err) => {
                        console.log(err);
                    }
                });
            },

            disassemble(Data) {
                const areg = Data.address;
                const provinceIndex = areg.indexOf('省');
                const cityIndex = areg.indexOf('市');
                const districtIndex = areg.indexOf('区');
                let address_name = '';

                address_name = areg.substring(districtIndex + 1, areg.length);
                this.Aaddress = address_name + Data.name;
            },

            SaveAddress() {
                if (!this.Aname) return this.$Toast('请输入收货人姓名');
                if (!this.Amobile) return this.$Toast('请输入收货人手机号');
                if (this.Amobile && !this.$reg.phone.test(this.Amobile)) return this.$Toast('手机号输入有误');
                if (!this.Aregion) return this.$Toast('请选择省市区');
                if (!this.Aaddress) return this.$Toast('请填写详细地址');
                this.$showLoading('保存中~');
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/addAdress',
                        data: {
                            Aname: this.Aname,
                            Amobile: this.Amobile,
                            Aregion: this.region.join(''),
                            Aaddress: this.Aaddress,
                            is_default: this.checked,
                            id: this.id
                            // addressComponent: JSON.stringify(this.addressComponent),
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.$back();
                    });
            },
            changeCity(e) {
                const city = e.detail.value;
                city.forEach((item, index) => {
                    this.region[index] = item;
                });
                this.Aregion = `${city[0]}/${city[1]}/${city[2]}`;
            },

            switchChange(e) {
                this.checked = e;
            },
            async chooseAddress() {
                const addressResult = await this.$pop.chooseAddress();
                this.addAdress(addressResult);
            },

            addAdress(item) {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/addAdress',
                        data: {
                            Aname: item.userName,
                            Amobile: item.telNumber,
                            Aregion: `${item.provinceName}${item.cityName}${item.countyName}`,
                            Aaddress: item.detailInfo,
                            is_default: 0
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.$back();
                    });
            },

            obtainAddress() {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/obtainAddress',
                        data: {
                            id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg, 2);
                        const result = res.data;
                        this.Aname = result.Aname;
                        this.Amobile = result.Amobile;
                        this.Aaddress = result.Aaddress;
                        this.checked = result.is_default == 0 ? false : true;
                        const areg = result.Aregion;
                        const provinceIndex = areg.indexOf('省');
                        const cityIndex = areg.indexOf('市');
                        const districtIndex = areg.indexOf('区');
                        if (districtIndex < cityIndex) {
                            this.region[0] = areg.substring(0, districtIndex + 1);
                            console.log(this.region[0]);
                            this.region[1] = areg.substring(districtIndex + 1, cityIndex + 1);
                            this.region[2] = areg.substring(cityIndex + 1, areg.length);
                        } else if (provinceIndex == -1) {
                            let list = areg.split('市');
                            this.region[0] = list[0] + '市';
                            this.region[1] = list[1] + '市';
                            this.region[2] = list[2];
                        } else {
                            this.region[0] = areg.substring(0, provinceIndex + 1);
                            this.region[1] = areg.substring(provinceIndex + 1, cityIndex + 1);
                            this.region[2] = areg.substring(cityIndex + 1, areg.length);
                        }
                        this.Aregion = `${this.region[0]}/${this.region[1]}/${this.region[2]}`;
                    });
            },
            delAdress() {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/delAdress',
                        data: {
                            id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.$back();
                    });
            }
        },
        onUnload() {
            this.getAddress('');
        },
        computed: {
            ...mapState(['color', 'position', 'userInfo', 'resultAdd', 'tdkey'])
        }
    };
</script>
<style>
    page {
        background-color: #f7f9fa;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
    }
</style>
<style lang="scss" scoped>
    .list {
        width: 100%;
        height: 90rpx;
        display: flex;
        align-items: center;
    }

    .listText {
        width: 100%;
        display: flex;
        min-height: 90rpx;
        overflow: hidden;
    }

    .title_name {
        width: 150rpx;
        color: #000;
        font-size: 28rpx;
        color: #949495;
    }

    ::v-deep.place {
        color: #ccc;
    }

    .city {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    .cityPick {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 80;
    }

    .textarea {
        min-height: 100rpx;
        padding-top: 6rpx;
        padding-bottom: 10rpx;
        display: block;
    }

    .botBtn {
        width: 690rpx;
        height: 80rpx;
        margin: 30rpx auto 0;
        border-radius: 40rpx;
        font-size: 28rpx;
    }

    .delAdd {
        border: 1rpx solid #f0f1f3;
    }

    .Save {
        background-color: var(--color);
    }
</style>
